<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
     <link rel="stylesheet" type="text/css"  href="style/bootstrap.min.css"/>
	<style type="text/css">
		.span5{
			height:30px;
		}
		#mima{
			margin:30px;
		
		}
		.mydiv{
			margin:60px;
			
		}
		
	</style>
  </head>
 
  <body> 
 	<div style="z-index: 5" class="topbar-wrapper">
    <div data-dropdown="dropdown" class="topbar">
      <div class="topbar-inner">
        <div class="container">
          <h3><a href="#">Project Name</a></h3>
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" href="#">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a href="#">Secondary link</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Another link</a></li>
              </ul>
            </li>
          </ul>
         
          <ul class="nav secondary-nav">
            <li class="dropdown">
              <a class="dropdown-toggle" href="#">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a href="#">Secondary link</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Another link</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div><!-- /topbar-inner -->
    </div><!-- /topbar -->
  </div>
  
   <div class="mydiv">
   <%String ok = request.getParameter("ok");
  	if(ok!=null&&ok.equals("2")){%>
  	<div>退出成功</div>
  	<%}
   %>
 	<h3>系统登录</h3>
  	<form id="loginForm" action="user.html?s=login" method="post"  style="margin:60px">
  		用户名：<input type="text"  class="span5" name="name" id="myname"/><br/>
  		<select id="type"  size="9"  style="display:none"></select>
  		密码：<input type="password" class="span5" name="pwd" id="mima"  /><br/>
  		<input id="loginBtn" type="button" value="登录"   class="btn success"/>
  		
  	</form>
  	
 </div>
  <input  type="button"   value="查看天气"  id="myinput"/>
   <input  type="button"  value="看完毕"  id="myinput2"  style="display:none"/>
   <table   id="mybody"  style="display:none"></table>
    
  </body>
  
  <script type="text/javascript" src="script/jquery.js"></script>
  <script type="text/javascript" src="script/bootstrap-dropdown.js"></script>
  <script type="text/javascript">
  var xmlHttp;
  function  createXmlHttpRequest(){
  	if(window.ActiveXObject){
  		xmlHttp = new  ActiveXObject("Microsoft.XMLHTTP");
  	}else {
  		xmlHttp = new XMLHttpRequest();
  	}
  }
  document.getElementById("myname").onkeyup = function(){
  	createXmlHttpRequest();
  	 document.getElementById("type").style.display="inline";
  	  var name = document.getElementById("myname").value;
  	name = encodeURIComponent(name);
  	xmlHttp.onreadystatechange = callback;
  	xmlHttp.open("get","user.html?s=worker&name="+name,true);
  	xmlHttp.send();
  }
  function callback(){
  	
  		if(xmlHttp.readyState==4){
  			if(xmlHttp.status==200){
  				var xml = xmlHttp.responseXML;
  				var types = xml.getElementsByTagName("recode");
  				document.getElementById("type").options.length=0;
  				for(i=0;i<types.length;i++){
  				
  					var v = types[i].childNodes[0].nodeValue;
  					
  					var myOption = new  Option(v,v);
  					document.getElementById("type").options.add(myOption);
  					
  				}
  			}
  		}else {
  			//请求没返回
  		}
  	}
  document.getElementById("type").onclick =function(){
  		var name = document.getElementById("type").value;
  		document.getElementById("myname").value=name;
  		document.getElementById("type").style.display="none";
  	}
  	$(document).ready(function(){
  	$("#myinput").click(function(){
  		$("#myinput").hide();
  		$("#myinput2").show();
  		$("#mybody").show();
  		$.get("w.jspx",function(xml){
  			$(xml).find("forecast_conditions").each(function(){
  					var week = $(this).find("day_of_week").attr("data");
     				var low = $(this).find("low").attr("data");
     				var high = $(this).find("high").attr("data");
     				var icon = $(this).find("icon").attr("data");
     				var con = $(this).find("condition").attr("data");
     			$("<tr class=weather><th>"+week+"</th><th>最低温度"+low+"</th><th>最高温度"+high+"</th><th><img src='http://www.google.com"+icon+"'/></th><th>天气状况"+con+"</th></tr>").appendTo($('#mybody'));
  					
     				
  			});
  		});
  	});
  		$("#myinput2").click(function(){
     		$("#mybody").hide();
     		$("#myinput").show();
     		$("#myinput2").hide();
     		$(".weather").remove();
     	});
  		$("#loginBtn").click(function(){
  			var name = $("input[name='name']").val();
  			var pwd = $("input[name='pwd']").val();
  			var reg1=/^[A-z]$/;
  			if(name == "") {
  				$("input[name='name']").next("span").remove();
  				$("input[name='name']").after("<span style='color:red'>用户名不能为空</span>");
  				return;
  			}
  			if(!reg1.test(name)){
						$("input[name='name']").next("span").remove();
						$("input[name='name']").after("<span>用户名只能是英文字母，不区分大小写</span>");
						return;
					}
					var reg2=/^[A-z0-9]$/;
  			if(pwd == "") {
  				$("input[name='pwd']").next("span").remove();
  				$("input[name='pwd']").after("<span style='color:red'>密码不能为空</span>");
  				return;
  			}
  			if(!reg2.test(pwd)){
						$("input[name='pwd']").next("span").remove();
						$("input[name='pwd']").after("<span>密码只能是英文字母和数字，不区分大小写</span>");
					return;
					}
  			$("#loginForm").submit();
  		});
  		
  		$(".span5").click(function(){
  			$(this).next("span").remove();
  		});
  		$('#topbar').dropdown();
  	});
  	
  </script>
</html>
